@mixin snapcraft-p-carousel {
  // below this breakpoint we don't show buttons to move carousels
  // but leave scroll to allow swiping them on mobile
  $carousel-buttons-breakpoint: $breakpoint-medium;

  .p-carousel {
    margin: 1.5rem 0;
    position: relative;

    .p-carousel__item--snap {
      min-width: 198px;
    }

    .p-carousel__item,
    .p-carousel__item--snap,
    .p-carousel__item--screenshot,
    .p-carousel__item--video {
      box-sizing: border-box;
      transform-origin: top left;
    }

    .p-carousel__item--screenshot,
    .p-carousel__item--video {
      cursor: pointer;
      text-align: center;

      img,
      video {
        display: block;
        margin-bottom: 0;
        max-height: 460px;
        max-width: 100%;
        width: auto;
      }
    }

    .p-carousel__item--screenshot,
    .p-carousel__item-blocker {
      &:hover {
        &::after {
          background-color: $color-x-light;
          background-image: url('#{$assets-path}c566f22e-fullscreen-grey_16.svg');
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-size: .75rem .75rem;
          border: 1px solid $color-light;
          border-radius: 2px;
          content: '';
          display: block;
          height: 1.5rem;
          pointer-events: none;
          position: absolute;
          right: .625rem;
          top: .625rem;
          width: 1.5rem;
        }
      }
    }
  }

  // p-carousel__next p-carousel__prev
  // based on vbox-next vbox-prev from _patterns_maas_modal.scss
  .p-carousel__next,
  .p-carousel__prev {
    background: {
      color: $color-x-light;
      position: center;
      repeat: no-repeat;
      size: .25rem;
    }
    border-radius: 3rem;
    box-sizing: content-box;
    cursor: pointer;
    height: 3rem;
    margin: {
      bottom: 0;
      left: 0;
      // Overrides a rule in vanilla that adds margin to the right of buttons
      right: 0 !important;
      top: -1.5rem;
    }
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-indent: -999px;
    top: 50%;
    transition: opacity .165s;
    width: 3rem;
    z-index: 10;

    &.swiper-button-disabled {
      cursor: default;
      opacity: 0;
    }

    @media screen and (max-width: $breakpoint-small) {
      display: none;
    }
  }

  .p-carousel__prev {
    background-image: url('#{$assets-path}e8d2e45f-chevron-left.svg');
    left: -1rem;

    @media screen and (min-width: $breakpoint-large) {
      left: -1.5rem;
    }
  }

  .p-carousel__next {
    background-image: url('#{$assets-path}9716bbab-chevron.svg');
    right: -1rem;

    @media screen and (min-width: $breakpoint-large) {
      right: -1.5rem;
    }
  }

  // From here on is a copied (and modified) version of swiper core.less
  // Found at node_modules/swiper/src/components/core/core.less
  .swiper-container {
    list-style: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    // Fix of Webkit flickering
    z-index: 1;
  }

  .swiper-container-no-flexbox {
    .swiper-slide {
      float: left;
    }
  }

  .swiper-container-vertical > .swiper-wrapper {
    flex-direction: column;
  }

  .swiper-wrapper {
    align-items: center;
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
  }

  .swiper-container-android .swiper-slide,
  .swiper-wrapper {
    transform: translate3d(0, 0, 0);
  }

  .swiper-container-multirow > .swiper-wrapper {
    flex-wrap: wrap;
  }

  .swiper-container-free-mode > .swiper-wrapper {
    margin: 0 auto;
    transition-timing-function: ease-out;
  }

  .swiper-slide {
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
  }

  .swiper-slide-invisible-blank {
    visibility: hidden;
  }

  // Auto Height
  .swiper-container-autoheight,
  .swiper-container-autoheight .swiper-slide {
    height: auto;
  }

  .swiper-container-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
  }

  // IE10 Windows Phone 8 Fixes
  .swiper-container-wp8-horizontal,
  .swiper-container-wp8-horizontal > .swiper-wrapper {
    touch-action: pan-y;
  }

  .swiper-container-wp8-vertical,
  .swiper-container-wp8-vertical > .swiper-wrapper {
    touch-action: pan-x;
  }
}
